/**
 * description: 状态栏
 * fileName: index.tsx
 * author: ssr
 * date: 2022-08-12 09:57:41
 * version: V1.0.0
 */

import { defineComponent, onBeforeUnmount, watch, reactive, toRefs } from "vue";
import { CustomViewer, MathUtils } from "@@/utils/CustomCesium/CustomCesium";
import * as Cesium from "cesium";
import { cesiumStateTuiyan } from "@@/store-tuiyan/modules";
import { simulPanelStateTuiyan } from "@@/store-tuiyan/modules";

export default defineComponent({
  setup() {
    const store = cesiumStateTuiyan(),
      panelStore = simulPanelStateTuiyan(),
      guid = Cesium.createGuid(),
      state = reactive<{
        mousePosition: {
          longitude: string | undefined;
          latitude: string | undefined;
          height: string | undefined;
        };
      }>({
        mousePosition: {
          longitude: undefined,
          latitude: undefined,
          height: undefined,
        },
      });
    watch(
      () => store.customViewer,
      (newVal) => {
        if (newVal) {
          // 相机
          newVal.listenCameraChange((res) => {
            let lon = MathUtils.toDMS(res.lon),
              lat = MathUtils.toDMS(res.lat),
              strLon = `${Math.abs(lon?.degrees || 0)}°${lon?.minutes || 0}'${lon?.seconds || 0
                }"${Number(lon?.degrees) > 0 ? "E" : "W"}`,
              strLat = `${Math.abs(lat?.degrees || 0)}°${lat?.minutes || 0}'${lat?.seconds || 0
                }"${Number(lat?.degrees) > 0 ? "N" : "S"}`;
          });

          // 鼠标位置
          newVal.mouseHandlerManager?.addMouseMoveHandler(
            guid,
            ({ screenPosition }) => {
              const cartesian3 =
                screenPosition &&
                MathUtils.getSurfaceCartesian3(newVal.viewer, screenPosition),
                gcs =
                  cartesian3 && MathUtils.car3ToGCS(newVal.viewer, cartesian3);
              if (gcs) {
                const lon = MathUtils.toDMS(gcs.longitude),
                  lat = MathUtils.toDMS(gcs.latitude),
                  strLon = `${Math.abs(lon?.degrees || 0)}°${lon?.minutes || 0
                    }'${lon?.seconds || 0}"${Number(lon?.degrees) > 0 ? "E" : "W"
                    }`,
                  strLat = `${Math.abs(lat?.degrees || 0)}°${lat?.minutes || 0
                    }'${lat?.seconds || 0}"${Number(lat?.degrees) > 0 ? "N" : "S"
                    }`;

                const ellipsoid = newVal.viewer.scene.globe.ellipsoid;
                const cartographic = ellipsoid.cartesianToCartographic(cartesian3);
                const latitude = Cesium.Math.toDegrees(cartographic.latitude);
                const longitude = Cesium.Math.toDegrees(cartographic.longitude);
                const height = Cesium.Math.toDegrees(cartographic.height);

                state.mousePosition = {
                  longitude: strLon + '(' + longitude.toFixed(12) + ')',
                  latitude: strLat + '(' +latitude.toFixed(12) + ')',
                  height: (null == gcs.height ? void 0 : gcs.height.toFixed(3)) + '(' + height.toFixed(12) + ')',
                };
              }
            }
          );
        }
      }
    );

    // 组件销毁前
    onBeforeUnmount(() => {
      const customViewer: CustomViewer | null = store.getCustomViewer;

      customViewer?.mouseHandlerManager?.destroyHandlerByKey(guid);
    });

    return {
      panelStore,
      ...toRefs(state),
    };
  },
  render() {
    return (
      <div
        class={`cesium-footer ${this.panelStore.statusPanelShow && "expand"} ${!this.panelStore.statusPanelShow && "collapse"}`}
      >
        <div class="tools">
          <span>经度：{this.mousePosition.longitude}</span>
          <span>纬度：{this.mousePosition.latitude}</span>
        </div>
      </div>
    )
  }
});
